<template>
  <CollapsibleSection
    title="治疗计划与方案"
    :is-expanded="isExpanded"
    @toggle="$emit('toggle')"
  >
    <view class="space-y-[16rpx]">
      <!-- 职业选择 -->
      <view class="mb-[24rpx]">
        <view class="bg-white rounded-[12rpx] p-[20rpx] border border-gray-200">
          <text class="text-[22rpx] font-medium text-gray-600 mb-[12rpx] block">职业</text>
          <PickerInput
            :modelValue="formData.occupation"
            @update:modelValue="(value) => updateField('occupation', value)"
            :columns="[]"
            dictCode="job_type"
            placeholder="请选择职业"
            title="请选择职业"
          />
        </view>
      </view>
      <!-- 用药记录列表 -->
      <view v-for="(medication, index) in formData.medicationRecords" :key="index" class="bg-gray-50 rounded-[12rpx] p-[20rpx] border border-gray-200 mb-[16rpx]">
        <view class="flex items-center justify-between mb-[16rpx]">
          <text class="text-[26rpx] font-bold text-gray-700">用药记录</text>
          <view class="flex items-center space-x-[12rpx]">
            <view class="px-[12rpx] py-[6rpx] bg-blue-100 rounded-[8rpx]">
              <text class="text-[20rpx] text-blue-600 font-medium">记录 {{ index + 1 }}</text>
            </view>
            <view @click="removeMedicationRecord(index)" class="w-[32rpx] h-[32rpx] flex items-center justify-center">
              <IconFont name="close" size="14" color="#ef4444" />
            </view>
          </view>
        </view>
        
        <view class="grid grid-cols-1 gap-[16rpx]">
          <!-- 药物名称 -->
          <view class="bg-white rounded-[8rpx] p-[16rpx] border border-gray-200">
            <text class="text-[22rpx] font-medium text-gray-600 mb-[8rpx] block">药物名称</text>
            <nut-input 
              v-model="medication.drugName" 
              placeholder="请输入药物名称"
              class="w-full"
            />
          </view>
          
          <!-- 用药方法 -->
          <view class="bg-white rounded-[8rpx] p-[16rpx] border border-gray-200">
            <text class="text-[22rpx] font-medium text-gray-600 mb-[8rpx] block">用药方法</text>
            <nut-input 
              v-model="medication.medicationMethod" 
              placeholder="请输入用药方法（如：口服、注射等）"
              class="w-full"
            />
          </view>
          
          <!-- 用药剂量 -->
          <view class="bg-white rounded-[8rpx] p-[16rpx] border border-gray-200">
            <text class="text-[22rpx] font-medium text-gray-600 mb-[8rpx] block">用药剂量</text>
            <nut-input 
              v-model="medication.dosage" 
              placeholder="请输入用药剂量"
              class="w-full"
            />
          </view>
          
          <!-- 用药频率 -->
          <view class="bg-white rounded-[8rpx] p-[16rpx] border border-gray-200">
            <text class="text-[22rpx] font-medium text-gray-600 mb-[8rpx] block">用药频率</text>
            <nut-input 
              v-model="medication.medicationFrequency" 
              placeholder="请输入用药频率"
              class="w-full"
            />
          </view>
          
          <!-- 用药时长 -->
          <view class="bg-white rounded-[8rpx] p-[16rpx] border border-gray-200">
            <text class="text-[22rpx] font-medium text-gray-600 mb-[8rpx] block">用药时长</text>
            <nut-input 
              v-model="medication.medicationTime" 
              placeholder="请输入用药时长"
              class="w-full"
            />
          </view>
          
          <!-- 用药效果 -->
          <view class="bg-white rounded-[8rpx] p-[16rpx] border border-gray-200">
            <text class="text-[22rpx] font-medium text-gray-600 mb-[8rpx] block">用药效果</text>
            <nut-textarea 
              v-model="medication.effect" 
              placeholder="请输入用药效果"
              :rows="3"
              class="w-full"
            />
          </view>
        </view>
      </view>
      
      <!-- 添加用药记录按钮 -->
      <view class="flex items-center justify-center p-[24rpx] rounded-[12rpx] border-2 border-dashed border-green-300 active:bg-green-50" @click="addMedicationRecord">
        <IconFont name="plus" size="24" color="#00b26a" />
        <text class="text-[24rpx] text-[#00b26a] ml-[8rpx]">添加用药记录</text>
      </view>
      
      <!-- 处置项目列表 -->
      <ItemListManager
        :items="formData.dispositionItems || []"
        item-title="处置项目"
        add-button-text="添加处置项目"
        add-button-color="#00b26a"
        @add="addDispositionItem"
        @remove="removeDispositionItem"
        @update="updateDispositionItem"
      >
        <template #default="{ item, index, update }">
          <ItemWithImagesCard
            :model-value="item"
            @update:model-value="(data) => update(index, data)"
            :show-title="true"
            title-label="处置标题"
            title-placeholder="请输入处置标题"
            description-label="处置内容"
            description-placeholder="请输入处置方案"
            :description-rows="2"
            border-color="border-green-300"
          />
        </template>
      </ItemListManager>
      
      <!-- 健康教育项目列表 -->
      <ItemListManager
        :items="formData.healthEducationItems || []"
        item-title="健康教育项目"
        add-button-text="添加健康教育项目"
        add-button-color="#00b26a"
        @add="addHealthEducationItem"
        @remove="removeHealthEducationItem"
        @update="updateHealthEducationItem"
      >
        <template #default="{ item, index, update }">
          <ItemWithImagesCard
            :model-value="item"
            @update:model-value="(data) => update(index, data)"
            :show-title="true"
            title-label="健康教育标题"
            title-placeholder="请输入健康教育标题"
            description-label="健康教育内容"
            description-placeholder="请输入健康教育内容"
            :description-rows="2"
            border-color="border-purple-300"
          />
        </template>
      </ItemListManager>

      <!-- 分隔线 -->
      <view class="my-[32rpx] border-t-2 border-dashed border-gray-300"></view>

      <!-- 手术计划 -->
      <view class="mb-[24rpx]">
        <view class="flex items-center mb-[16rpx]">
          <view class="w-[6rpx] h-[28rpx] bg-orange-500 rounded-[3rpx] mr-[12rpx]"></view>
          <text class="text-[28rpx] font-bold text-gray-800">手术计划</text>
        </view>
        <ItemListManager
          :items="formData.surgeryItems || []"
          item-title="手术史项目"
          add-button-text="添加手术史项目"
          add-button-color="#ff9800"
          @add="addSurgeryItem"
          @remove="removeSurgeryItem"
          @update="updateSurgeryItem"
        >
          <template #default="{ item, index, update }">
            <ItemWithImagesCard
              :model-value="item"
              @update:model-value="(data) => update(index, data)"
              :show-title="true"
              title-label="手术标题"
              title-placeholder="请输入手术标题"
              description-label="手术详情"
              description-placeholder="请输入手术详情"
              :description-rows="2"
              border-color="border-orange-300"
            />
          </template>
        </ItemListManager>
      </view>

      <!-- 过敏防治 -->
      <view class="mb-[24rpx]">
        <view class="flex items-center mb-[16rpx]">
          <view class="w-[6rpx] h-[28rpx] bg-red-500 rounded-[3rpx] mr-[12rpx]"></view>
          <text class="text-[28rpx] font-bold text-gray-800">过敏防治</text>
        </view>
        <ItemListManager
          :items="formData.allergyItems || []"
          item-title="过敏史项目"
          add-button-text="添加过敏史项目"
          add-button-color="#f44336"
          @add="addAllergyItem"
          @remove="removeAllergyItem"
          @update="updateAllergyItem"
        >
          <template #default="{ item, index, update }">
            <ItemWithImagesCard
              :model-value="item"
              @update:model-value="(data) => update(index, data)"
              :show-title="true"
              title-label="过敏类型"
              title-placeholder="请输入过敏类型"
              description-label="过敏详情"
              description-placeholder="请输入过敏详情"
              :description-rows="2"
              border-color="border-red-300"
            />
          </template>
        </ItemListManager>
      </view>

      <!-- 预防接种与筛查计划 -->
      <view class="mb-[24rpx]">
        <view class="flex items-center mb-[16rpx]">
          <view class="w-[6rpx] h-[28rpx] bg-blue-500 rounded-[3rpx] mr-[12rpx]"></view>
          <text class="text-[28rpx] font-bold text-gray-800">预防接种与筛查计划</text>
        </view>
        
        <!-- 接种项目列表 -->
        <view class="border border-blue-200 rounded-[12rpx] p-[16rpx] bg-blue-50 mb-[16rpx]">
          <text class="text-[24rpx] font-semibold text-blue-800 block mb-[12rpx]">💉 接种</text>
          
          <ItemListManager
            :items="formData.vaccinationItems || []"
            item-title="接种项目"
            add-button-text="添加接种项目"
            add-button-color="#2196f3"
            @add="addVaccinationItem"
            @remove="removeVaccinationItem"
            @update="updateVaccinationItem"
          >
            <template #default="{ item, index, update }">
              <ItemWithImagesCard
                :model-value="item"
                @update:model-value="(data) => update(index, data)"
                :show-title="true"
                title-label="疫苗名称"
                title-placeholder="请输入疫苗名称"
                description-label="接种详情"
                description-placeholder="请输入接种详情"
                :description-rows="2"
                border-color="border-blue-300"
              />
            </template>
          </ItemListManager>
        </view>

        <!-- 筛查项目列表 -->
        <view class="border border-green-200 rounded-[12rpx] p-[16rpx] bg-green-50">
          <text class="text-[24rpx] font-semibold text-green-800 block mb-[12rpx]">🔍 筛查</text>
          
          <ItemListManager
            :items="formData.screeningItems || []"
            item-title="筛查项目"
            add-button-text="添加筛查项目"
            add-button-color="#4caf50"
            @add="addScreeningItem"
            @remove="removeScreeningItem"
            @update="updateScreeningItem"
          >
            <template #default="{ item, index, update }">
              <ItemWithImagesCard
                :model-value="item"
                @update:model-value="(data) => update(index, data)"
                :show-title="true"
                title-label="筛查类型"
                title-placeholder="请输入筛查类型"
                description-label="筛查详情"
                description-placeholder="请输入筛查详情"
                :description-rows="2"
                border-color="border-green-300"
              />
            </template>
          </ItemListManager>
        </view>
      </view>

      <!-- 周期性健康检查计划 -->
      <view class="mb-[24rpx]">
        <view class="flex items-center mb-[16rpx]">
          <view class="w-[6rpx] h-[28rpx] bg-cyan-500 rounded-[3rpx] mr-[12rpx]"></view>
          <text class="text-[28rpx] font-bold text-gray-800">周期性健康检查计划</text>
        </view>
        <ItemListManager
          :items="formData.periodicHealthCheckItems || []"
          item-title="健康检查项目"
          add-button-text="添加健康检查项目"
          add-button-color="#2196f3"
          @add="addPeriodicHealthCheckItem"
          @remove="removePeriodicHealthCheckItem"
          @update="updatePeriodicHealthCheckItem"
        >
          <template #default="{ item, index, update }">
            <ItemWithImagesCard
              :model-value="item"
              @update:model-value="(data) => update(index, data)"
              :show-title="true"
              title-label="检查类型"
              title-placeholder="请输入检查类型"
              description-label="检查详情"
              description-placeholder="请输入检查详情"
              :description-rows="2"
              border-color="border-blue-300"
            />
          </template>
        </ItemListManager>
      </view>

      <!-- 生活方式与习惯改善计划 -->
      <view class="mb-[24rpx]">
        <view class="flex items-center mb-[16rpx]">
          <view class="w-[6rpx] h-[28rpx] bg-purple-500 rounded-[3rpx] mr-[12rpx]"></view>
          <text class="text-[28rpx] font-bold text-gray-800">生活方式与习惯改善计划</text>
        </view>
        <LifestyleSection v-model="lifestyleData" />
      </view>
    </view>
  </CollapsibleSection>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { IconFont } from '@nutui/icons-vue-taro'
import { useItemManagement } from '@/composables/useItemManagement'
import CollapsibleSection from '@/components/CollapsibleSection.vue'
import ItemListManager from '@/components/ItemListManager.vue'
import ItemWithImagesCard from '@/components/ItemWithImagesCard.vue'
import LifestyleSection from '@/components/medical-record/LifestyleSection.vue'
import PickerInput from '@/components/PickerInput.vue'

interface Props {
  isExpanded: boolean
}

interface Emits {
  (e: 'toggle'): void
}

defineProps<Props>()
defineEmits<Emits>()

const { 
  formData, 
  updateField,
  addMedicationRecord, 
  removeMedicationRecord,
  addDispositionItem,
  removeDispositionItem,
  updateDispositionItem,
  addHealthEducationItem,
  removeHealthEducationItem,
  updateHealthEducationItem,
  addSurgeryItem,
  removeSurgeryItem,
  updateSurgeryItem,
  addAllergyItem,
  removeAllergyItem,
  updateAllergyItem,
  addVaccinationItem,
  removeVaccinationItem,
  updateVaccinationItem,
  addScreeningItem,
  removeScreeningItem,
  updateScreeningItem,
  addPeriodicHealthCheckItem,
  removePeriodicHealthCheckItem,
  updatePeriodicHealthCheckItem
} = useItemManagement()

// 生活方式数据
const lifestyleData = ref({
  diet_habits: {
    diet: { title: '', description: '', images: [] },
    preferred_foods: { title: '', description: '', images: [] },
    nutrition: {
      nutrition_intake: { title: '', description: '', images: [] }
    }
  },
  exercise_habits: {
    exercise: { title: '', description: '', images: [] },
    exercise_frequency: { title: '', description: '', images: [] },
    exercise_methods: { title: '', description: '', images: [] }
  },
  smoking_situation: {
    smoking_habits: { title: '', description: '', images: [] }
  },
  drinking_situation: {
    drinking_habits: { title: '', description: '', images: [] }
  }
})

// 初始化检查：当medicationRecords为空时自动添加一条
onMounted(() => {
  setTimeout(() => {
    const records = formData.value?.medicationRecords || []
    console.log('治疗计划模块初始化检查，当前用药记录数:', records.length)
    if (records.length === 0) {
      console.log('开始添加默认用药记录')
      addMedicationRecord()
    }
  }, 2000)
})
</script>

<style scoped lang="scss">
:deep(.nut-textarea) {
  border-radius: 8rpx;
  padding: 12rpx 20rpx;
  background: #f0f0f0;
}
</style>
